<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Select(单选) 模拟插件 V1.3.6.2</title>
<style type="text/css">
h2 {font:900 12px/1.6 Arial, Helvetica, sans-serif;}
</style>
<link href="assets/selectStyle.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../common/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="assets/jquery.select-1.3.6.js"></script>
<script type="text/javascript">
var order = {albumstyle: 'xxx'};
$(document).ready(function(){
  var _self = this;
  var datas = [{
    "id":1,
    "text":"1",
    "value": 'x'
  },{
    "id":2,
    "text":"2",
    "value": 'xx'
  },{
    "id":3,
    "text":"3",
    "value": 'xxx'
  },{
    "id":4,
    "text":"4",
    "value": 'xxxx'
  },{
    "id":5,
    "text":"5",
    "value": 'xxxxx'
  }];
  var sel = document.getElementById('brithday');
  var div = document.getElementById('div');
  

  for (var i = 0, il = datas.length; i < il; i++) {
    var obj = datas[i];
    op = new Option(obj.text);
    op._obj = obj;
    if (order.albumstyle == obj.value) {
      op.selected = 'selected';
    }
    sel.options[sel.options.length] = op;
  }
  sel.onchange = function() { order.albumstyle = this.options[this.selectedIndex]._obj.value; show();};
  show();

  function show() {
     while (div && div.firstChild) {
       div.removeChild(div.firstChild);
     }
     div.appendChild(document.createTextNode(order.albumstyle));
   }

  $("select").sSelect();
})

</script>
</head>
<body>
<h1>jQuery Select(单选) 模拟插件 V1.3.6.2</h1>
<div style="float:left;">
<h2>模拟示例</h2>
    <select id="brithday" name="birthday" style="width: 150px"></select>
    <div id="div"></div>
</body>
</html>